<template>
  <section class="organization_change_history_header">
    <el-form :inline="true"
             :model="form"
             ref="form">
      <el-form-item label="组织" class="mr30">
        <el-select :value="orgSelected"
                   @change="handleOrgChange"
                   class="w160">
          <el-option v-for="item in organizationOptions"
                     :key="item.value"
                     :label="item.label"
                     :value="item.value"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="操作人" class="mr30">
        <el-input v-model="form.key"
                  placeholder="请输入操作人名称/ID"
                  class="w240"></el-input>
      </el-form-item>
      <el-form-item label="操作类型" class="mr30">
        <el-select v-model="form.operateType" class="w160">
          <el-option v-for="item in operateTypeOptions"
                     :key="item.value"
                     :label="item.label"
                     :value="item.value"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="变更时间">
        <el-date-picker v-model="form.timeRange"
                        type="datetimerange"
                        range-separator="至"
                        start-placeholder="开始日期"
                        end-placeholder="结束日期"
                        style="width: 360px"></el-date-picker>
      </el-form-item>
      <el-form-item>
        <el-button type="primary"
                   @click="handleSearch">查询</el-button>
        <el-button @click="handleReset">重置</el-button>
      </el-form-item>
    </el-form>
  </section>
</template>
<script>
import { mapGetters, mapActions } from "vuex";
export default {
  name: "organizationChangeHistoryHeader",
  data () {
    return {
      form: {
        key: '',
        operateType: null,
        timeRange: []
      }
    };
  },
  watch: {
    tableParams (val) {
      const { key, operateType, startDate, endDate } = val
      this.form = {
        key,
        operateType,
        timeRange: [startDate, endDate]
      }
    }
  },
  computed: {
    ...mapGetters({
      organizationOptions: "organizationChangeHistory/organization",
      orgSelected: "organizationChangeHistory/orgSelected",
      operateTypes: "organizationChangeHistory/operateTypeOptions",
      tableParams: "organizationChangeHistory/tableParams",
    }),
    operateTypeOptions () {
      return [{ value: null, label: "全部" }, ...this.operateTypes];
    },
  },
  methods: {
    ...mapActions({
      setOrgSelected: "organizationChangeHistory/setOrgSelected",
      fetchTableData: "organizationChangeHistory/fetchTableData"
    }),
    handleSearch () { 
      const {key, operateType, timeRange} = this.form
      this.fetchTableData({
        ...this.tableParams,
        key,
        operateType,
        startDate: + new Date(timeRange[0]),
        endDate: + new Date(timeRange[1]),
        page: 1
      })
    },
    handleReset () {
     this.fetchTableData({
        ...this.tableParams,
        key: '',
        operateType: null,
        startDate: '',
        endDate: '',
        page: 1
      })
     },
    handleOrgChange (val) {
      this.setOrgSelected(val)
    }
  }
};
</script>
<style scoped lang="scss">
.organization_change_history_header {
  overflow: hidden;
}
/deep/ .el-date-editor .el-range-separator{
  width: 30px;
}
</style>
